<script>

var passo = "passo1";

$(document).ready(function (){
    $("#cnpj_cpf").mask("99.999.999/9999-99");
    configura_mascara();
});

function configura_mascara(){
    $(".telefone").mask("(99) 9999-9999");
    $("#cep").mask("99999-999");
}

function configura_tipo(){
    if (document.cliente.elements['cliente[CLI_TIPO]'][0].checked){
        juridica_fisica("J");
    }else{
        juridica_fisica("F");
    }
}

// Executado quando clica no radio button
function juridica_fisica(value){
    if(value == "F"){
        $("#td_fantasia").html("Nome de<br/>Apresenta&ccedil;&atilde;o:*");
        $("#cnpj_cpf").mask("999.999.999-99");
    }else{
        $("#td_fantasia").html("Nome<br/>Fantasia:*");
        $("#cnpj_cpf").mask("99.999.999/9999-99");
    }
}

// Valida os campos no submite
function valida(){
    
    var form = document.cliente;
    var pessoa = form.elements['cliente[CLI_TIPO]'];
    var nome = form.elements['cliente[CLI_NOME]'];
    var fantasia = form.elements['cliente[CLI_FANTASIA]'];
    var uf = form.elements['EST_SIGLA'];
    var cidade = form.elements['cliente[CID_ID]'];
    var logradouro = form.elements['cliente[CLI_LOGRADOURO]'];
    var CNPJ_CPF = form.elements['cliente[CLI_CNPJ_CPF]'];
    var email = form.elements['cliente[CLI_EMAIL]'];
    var msn = form.elements['cliente[CLI_MSN]'];
    var telefone1 = form.elements['cliente[CLI_TEL1]'];
    var CEP = form.elements['cliente[CLI_CEP]'];
    
    //Expressao para teste de email
    testeEmail = /^\w+[\.\-\w]+@\w+([\.][\w]+)+$/;
    
    if (nome.value.length == 0){
        alert("O campo Nome não pode ser vazio!");
        nome.focus();
        return false;
    }else if (fantasia.value.length == 0){
        alert("O campo Nome Fantasia/Apresentação não pode ser vazio!");
        fantasia.focus();
        return false;
    }else if(CNPJ_CPF.value.length == 0){
        alert ("O CNPJ/CPF não pode ser vazio!");
        CNPJ_CPF.focus();
        return false;
    }else if(pessoa[0].checked && !validaCNPJ(CNPJ_CPF.value)){
        alert ("O CNPJ é inválido!");
        CNPJ_CPF.focus();
        return false;
    }else if(pessoa[1].checked && !validaCPF(CNPJ_CPF.value)){
        alert ("O CPF é invalido!");
        CNPJ_CPF.focus();
        return false;
    }else if(checaCnpjCpf(CNPJ_CPF.value)){
        alert ("Já existe esse CNPJ/CPF cadastrado!\nNão é permitido mais de um cadastro por CNPJ/CPF.");
        CNPJ_CPF.focus();
        return false;
    }else if (cidade.value == ""){
        alert("O campo Cidade não pode ser vazio!");
        uf.focus();
        return false;
    }else if (CEP.value == ""){
        alert("O campo CEP não pode ser vazio!");
        CEP.focus();
        return false;
    }else if (logradouro.value == ""){
        alert("O campo Logradouro não pode ser vazio!");
        logradouro.focus();
        return false;
    }else if (!testeEmail.test(email.value)){
        alert("O campo Email não possui um valor válido!");
        email.focus();
        return false;
    }else if (msn.value != "" && !testeEmail.test(msn.value)){
        alert("O campo MSN não possui um valor válido!");
        msn.focus();
        return false;
    }else if (telefone1.value == ""){
        alert("O campo Telefone 1 não pode ser vazio!");
        telefone1.focus();
        return false;
    }
    
    
    return true;
}

<?php include "script/valida_CNPJ_CPF.js"; ?>

function botao_proximo(){
    if (passo == "passo1"){
        if (document.cliente.termos_de_uso.checked == false ){
            alert("Antes de prosseguir,\nAceite as normas que regimentam o uso do nosso site.");
            return false;
        }
        $("#mostra_passo1").addClass("mostra_passo_anterior");
        $("#mostra_passo2").removeClass("mostra_passo_proximo");
        $("#div_passo1").css("display", "none");
        $("#div_passo2").css("display", "block");
        passo = "passo2";
    }else if(passo == "passo2"){
        // Testa o passo 2
        if(!valida()) return false;
        
        $("#mostra_passo2").addClass("mostra_passo_anterior");
        $("#mostra_passo3").removeClass("mostra_passo_proximo");
        $("#div_passo2").css("display", "none");
        $("#div_passo3").css("display", "block");
        passo = "passo3";
    }else{
        form = document.cliente;
        usuario = form.elements["usuario[USU_NOME]"];
        senha = form.elements["usuario[USU_SENHA]"];
        senha_verificacao = form.elements["senha_verificacao"];
        captcha = form.elements["captcha"];
        if (usuario.value.length < 6){
            alert("O nome de usuário deve ter no mínimo 6 caracteres");
            return false;
        }else if(checaUsuario(usuario.value)){
            alert("Já existe esse usuário cadastrado");
            return false;
        }else if (senha.value.length < 6){
            alert("A senha deve ter no mínimo 6 caracteres");
            return false;
        }else if (senha.value != senha_verificacao.value){
            alert("As senhas não coincidem");
            return false;
        }else if (!checaCaptcha(captcha.value)){
            alert("Os caracteres digitados não coincidem com a imagem");
            $("#captcha_imagem").attr("src", "./imagens/captcha.php?"+(new Date()).getTime());
            captcha.focus();
            return false;
        }
        show_loading_screen();
        document.cliente.submit();
    }
}

function checaUsuario(valor){
    var link = "ajax.php?action=checa_usuario&usuario="+valor;
    retorno = false;
    $.ajax({
        url: link,
        async: false,
        success: function(data) {
           if(data > 0) retorno = true;
       }});
    return retorno;
}

function checaCaptcha(valor){
    var link = "ajax.php?action=checa_captcha&captcha="+valor;
    retorno = false;
    $.ajax({
        url: link,
        async: false,
        success: function(data) {
           if(data == "ok") retorno = true;
       }});
    return retorno;
}

function valida_usuario(){
    usuario = document.cliente.elements["usuario[USU_NOME]"];
    if (usuario.value.length < 6){
        $("#mensagem_usuario").html("O usu&aacute;rio deve ter no m&iacute;nimo 6 caracteres");
        usuario.focus();
    }else if (checaUsuario(usuario.value)){
        $("#mensagem_usuario").html("Usu&aacute;rio j&aacute; existe");
        usuario.focus();
    }else{
        $("#mensagem_usuario").html("Usuario V&aacute;lido");
    }
}

function corrige_caracteres(element){
    tmp = element.value.toLowerCase();
    tmp = tmp.replace(" ", "", 'g');
    element.value = tmp;
}
</script>
<form class="formularios"  id="form_usuario" name="cliente" action="./action.php?action=cadastra" onsubmit="return valida();" method="post">
    <div id="div_passo1" class="corpo_conteudo">
        <span class="titulo_conteudo">Passo 1 de 3 - Aceita&ccedil;&atilde;o do termo de uso e da pol&iacute;tica de privacidade</span>
        <div class="corpo_conteudo">
            <p style="font-weight: normal;">Muito obrigado pelo seu interesse no <v>www.vantilcargas.com.br</v>.</p>
            <p style="font-weight: normal;">Ap&oacute;s essas etapas, voc&ecirc; receber&aacute; um e-mail para confirmar seu cadastro, e, uma vez confirmado, voc&ecirc; j&aacute; peder&aacute; utilizar nossos servi&ccedil;os.</p>
            <p style="font-weight: normal;">Ressaltamos que, para este per&iacute;odo inicial do <v>Vantil Cargas</v>, esse acesso ser&aacute; gratuito. Reservamo-nos o direito de passar a cobrar a qualquer instante por um, ou mais, de nossos servi&ccedil;os.</p>
        <p style="font-weight: normal;">N&atilde;o deixe tamb&eacute;m de fazer a leitura dos <a href="index.php?page=termos_de_uso" target="_blank">Termos de Uso</a> e da nossa <a href="index.php?page=politica_de_privacidade" target="_blank">Pol&iacute;tica de Privacidade</a>. Marcando a op&ccedil;&atilde;o abaixo voc&ecirc; estar&aacute; concordando com as regras que regimentam o uso deste site.</p>
            <input type="checkbox" name="termos_de_uso"/>Declaro estar de acordo com as normas que regimentam o uso deste site
        </div><br/>
        <input type="button" onclick="return botao_proximo();" value="Proximo"/>
    </div>
    <div style="display: none;" id="div_passo2">
        <div class="corpo_conteudo">
            <span class="titulo_conteudo">Passo 2 de 3 - Entre com seus dados cadastrais</span><br/>
            <input class="radio" type="radio" name="cliente[CLI_TIPO]" value="J" onchange="juridica_fisica(this.value);" checked="checked"/> Pessoa Jur&iacute;dica
            <input class="radio" id="input_pf" type="radio" name="cliente[CLI_TIPO]" value="F" onchange="juridica_fisica(this.value);"/> Pessoa F&iacute;sica<br/>
            <br/>
            <table>
                <tr><td width="105">Nome:*</td><td><input type="text" name="cliente[CLI_NOME]" maxlength="60" size="60"/></td></tr>
                <tr><td id="td_fantasia" style="width: 100px">Nome<br/>Fantasia:*</td><td><input type="text" id="nome_fantasia" name="cliente[CLI_FANTASIA]" maxlength="60" size="60" /></td></tr>
                <tr><td>CNPJ/CPF:*</td><td><input type="text" id="cnpj_cpf" name="cliente[CLI_CNPJ_CPF]" size="20" />
                        IE/RG: <input class="input" type="text" name="cliente[CLI_IE_RG]" maxlength="20" size="20" /></td></tr>
            </table>
        </div>
        <div class="linha_conteudo"></div>
        <div class="corpo_conteudo">
            <table>
                <tr><td width="105">UF:</td><td>
                        <select class="select" name="EST_SIGLA" onchange="buscaCidade('cidade', this.value);">
                            <option></option>
                        <?php
                            include $app.'dao/dao_localidade.php';

                            $dao_localidade = new dao_localidade();
                            $result = $dao_localidade->selectAllUF();

                            foreach($result as $row){
                                echo "<option value=".$row['EST_SIGLA'].">".$row['EST_SIGLA']."</option>";
                            }
                        ?></select>
                        Cidade:* <select name="cliente[CID_ID]" class="select" id="cidade" style="width: 200px;"></select>
                        CEP:* <input type="text" size="10" name="cliente[CLI_CEP]" id="cep" /></td></tr>
                <tr><td>Logradouro:*</td><td><input type="text" maxlength="60" size="60" name="cliente[CLI_LOGRADOURO]"/>
            </td></tr>
                <tr><td>Complemento:</td><td><input type="text" maxlength="30" size="30" name="cliente[CLI_COMPLEMENTO]"/>
                Bairro: <input type="text" maxlength="30" size="30" name="cliente[CLI_BAIRRO]"/></td></tr>
            </table>
        </div>
        <div class="linha_conteudo"></div>
        <div class="corpo_conteudo">
            <table>
                <tr><td width="105">Email:*</td><td><input type="text" maxlength="40" size="40" name="cliente[CLI_EMAIL]" />
                        Skype: <input type="text" maxlength="20" size="20" name="cliente[CLI_SKYPE]" /></td></tr>
                <tr><td>MSN:</td><td><input type="text" maxlength="40" size="40" name="cliente[CLI_MSN]"  />
                        Telefone 1:* <input type="text" size="12" name="cliente[CLI_TEL1]" class="telefone"  /></td></tr>
                <tr><td>Telefone 2: </td><td><input type="text" size="12" name="cliente[CLI_TEL2]" class="telefone" />
                        Celular: <input type="text" size="12" name="cliente[CLI_CELULAR]" class="telefone" />
                        FAX: <input type="text" size="12" name="cliente[CLI_FAX]" class="telefone" /></td></tr>
            </table>
        </div>
        <div class="linha_conteudo"></div>
        <br/>
        <small>* Campos obrigat&oacute;rios</small>
        <br/><br/>
        <input type="button" onclick="return botao_proximo();" value="Proximo"/>
    </div>
<div  id="div_passo3" style="display: none">
    <span class="titulo_conteudo">Passo 3 de 3 - S&oacute; mais alguns dados</span>
    <div class="corpo_conteudo">
        <table>
            <tr><td>Usu&aacute;rio:*</td><td><input type="text" name="usuario[USU_NOME]" maxlength="30" onblur="valida_usuario();" onkeyup="corrige_caracteres(this);"/> <span style="color: blue" id="mensagem_usuario"></span></td></tr>
            <tr><td>Senha:*</td><td><input type="password" name="usuario[USU_SENHA]" maxlength="30"/></td></tr>
            <tr><td>Repetir Senha:</td><td><input type="password" name="senha_verificacao" maxlength="30"/></td></tr>

        </table>
        <br/>
        <img id="captcha_imagem" src="./imagens/captcha.php"/>
        <br/>
        <br/>
        Digite os caracteres da imagem acima:<br/>
        <input name="captcha" type="text" maxlength="9" size="15"/>
        <br/><br/>
    </div>
    <div class="linha_conteudo"></div><br/>
    <small>* O usu&aacute;rio e a senha devem ter no m&iacute;nimo 6 e no m&aacute;ximo 30 caracteres</small>
    <br/><br/>
    <input type="button" onclick="return botao_proximo();" value="Concluir"/>
</div>

</form>